<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head th:replace="_fragments::head(博客分类)">
	 <meta charset="utf-8" /> 
	 <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
	 <meta name="viewport" content="width=device-width, initial-scale=1"/> 
  </head>
  
  <body>
	<!-- 导航条 -->
	<nav th:replace="_fragments::nav(1)" class="navbar navbar-default navbar-fixed-top " style="background-color: rgba(0,0,0,0.5);border: 0.5px;">
	 <div class="container">
	  <div class="navbar-header row" >
	    <!-- logo -->
	    <a class="navbar-brand" href="#"><font class="font-nav">ZkcBlog</font></a>

 		<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-menu" >
	        <span class="sr-only">Toggle navigation</span>
	        <span class="icon-bar" style="background: #fff"></span>
	        <span class="icon-bar" style="background: #fff"></span>
	        <span class="icon-bar" style="background: #fff"></span>
	    </button>
	  </div>
	  <!-- 自适应菜单栏 -->
	  <div class="navbar-right navbar-collapse collapse" id="nav-menu">
		  <ul class="nav navbar-nav" >
		  	<li><a href="index.html"><font class="font-nav">首页</font></a></li>
		   	<li><a href="archive.html"><font class="font-nav">文章归档</font></a></li>
		  	<li><a href="blogcate.html"><font class="font-nav">文章分类</font></a></li>
		   	<li><a href="aboutweb.html"><font class="font-nav">关于网站</font></a></li>
		  </ul>
		  <form class="navbar-form navbar-left" id="searchform">
	        <div class="form-group">
	          <input th:type="text" class="form-control" th:placeholder="Search"/>
	        </div>
	        <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
	      </form>
      </div>
	 </div>
	</nav>
	
	<!-- 中间主体 -->
	<div id="main" class="container">
		<div id="main1">
		<div class="panel panel-default">
			<!--标注-->
			<div class="panel-heading" style="background:#fff">
				
				<h4 class="pull-left">分类</h4>
				<h4 class="pull-right">共<b style="color: red">{{blogcates.total}}</b>个</h4>
				<div class="clearfix"></div>
			</div>
			<div class="panel-body">
			<input id="cateid" type="hidden" th:value="${cateid}"/>
				<ul class="blogcate-cateul list-inline">
					<!-- <li><a class="btn btn-default" >SpringBoot &nbsp;&nbsp;<span class="badge">14</span></a></li> -->
					<li v-for="cate in blogcates.list" >
					<a v-on:click="blogajax(1,5,'',cate.cateid)" class="btn btn-default" >{{cate.catename}} &nbsp;&nbsp;<span class="badge"></span></a>
					</li>
				</ul>
			</div>
		</div>
		</div>
		<div id="main2">
			<!--文章主体-->
			<div class="panel panel-default" style="padding: 0px;">
				<div class="panel-heading">
					<h3 class="bolgtitle panel-title">
					博客
					</h3>
				</div>
				<div class="panel-body">
					<div class="container-fluid">
					  	<div v-for="blog in blogs.list" class="row" style="height: 200px; padding:10px 15px;">
					  		<div class="col-md-8">
					  			<div class="content">
						  			<h3><a :href="'showblog.html?blogid='+blog.blogid">{{ blog.title }}</a></h3>
							  		<p class="content-p text-justify ">
							  		{{blog.content}}
							  		</p>
						  		</div>
						  		<div class="content-footer">
							  		<br/>
							  		<span class="glyphicon glyphicon-dashboard"></span>
							  		<span>{{blog.createtime}}</span>
							  		 
							  		<span class="glyphicon glyphicon-eye-open"></span>
							  		<span>  </span>
						  		</div>
					  		</div>
					  		<div class="col-md-4 bookimg" align="center" style="padding-top: 20px;height: 100%;"><!-- image/bolgtest.jpg -->
					  			<img v-if="blog.img!=null" class="img-responsive img-thumbnail" v-bind:src="blog.img" alt="..." />
					  		</div>
					  	</div>
					  	<hr/>	
					</div> 
					<!-- 分页 -->
					 <nav aria-label="Page navigation">
					  <ul class="pagination">
					    <li>
					      <a id="up" class="btn" aria-label="Previous" v-on:click="bolgajax(blogs.pageNum-1,5,'',cateid)">
					        <span aria-hidden="true">上一页</span>
					      </a>
					    </li>
		 			    <li class="active"><a>{{blogs.pageNum}}</a></li>
					    <li>
					      <a id="down" class="btn"  aria-label="Next" v-on:click="bolgajax(blogs.pageNum+1,5,'',cateid)">
					        <span aria-hidden="true">下一页</span>
					      </a>
					    </li>
					    <li class="disabled">
					        <a class="btn">总页数：{{blogs.pages}}</a>
					    </li>
					  </ul>
					</nav>
					<!--分页结束-->
				</div>
			</div>
			<!--文章主体结束-->
		</div>
	</div>

	<!--中间结束-->

<!-- 底部 -->
	<footer th:replace="_fragments::footer" class="panel-footer" style="background: #2a2730; color: #fff">
	</footer>
	
<div th:replace="_fragments::js">
</div>
</body>
<script>
//通过vue.js 把数据和对应的视图关联起来
new Vue({
      el: '#main',
      data: {
        blogcates: [],
        blogs:[],
        cateid:0
      },
      mounted:function(){
    	  var seft=this;
    	  seft.cateid=$("#cateid").val();
    	  seft.cateajax();
    	  seft.blogajax(1,5,"",seft.cateid);
      },
      methods:{//所有方法必须在method里创建
    	  cateajax:function(){
    		  var seft=this;
    		  $.ajax({
    				url:"http://localhost:8888/blogcate",
    				type:'get',
    				data:{size:9999},
    				//async: false,//同步
    				success : function(data){
    					seft.blogcates=data.data;
    				},
    				fail:function(){
    					console.log("Fetch错误:"+err);
    				}
    			});
    	  },
    	  blogajax:function(startnum,size,key,cateid){
    		  var seft=this;
    		  $.ajax({
    				url:"http://localhost:8888/blog",
    				type:'get',
    				data:{start:startnum,size:size,searchkey:key,cateid:cateid},
    				//async: false,//同步
    				success : function(data){
    					seft.blogs=data.data;
    					seft.cateid=cateid;
    					if(seft.blogs.pageNum>1){
    						$("#up").removeClass("disabled");
    					}else{
    						$("#up").addClass("disabled");
    					}
     					if(seft.blogs.pageNum>=seft.blogs.pages){
    						$("#down").addClass("disabled");
    					}else{
    						$("#down").removeClass("disabled");
    					} 
     					
    					//限制标题与文章在表格中显示大小
    					var i=0;
    					for(blog in seft.blogs.list){
    						if(seft.blogs.list[i].title.length>20){
    							seft.blogs.list[i].title=seft.blogs.list[i].title.slice(0,20)+'...';
    						}
    						if(seft.blogs.list[i].content.length>25){
    							seft.blogs.list[i].content=seft.blogs.list[i].content.slice(0,25)+'...';
    						}
    						i++;
    					}
     					
    				},
    				fail:function(){
    					console.log("请求错误:"+err);
    				}
    			});
    	  }
      }
    })

</script>
</html>